<script setup>
const Data = [
  {
    id: 1,
    imgUrl: new URL('@/assets/img/achievement/parentOne.webp', import.meta.url)
      .href,
    comment:
      '我觉得人们正越来越深层次地被卷入到以软件驱动的数字化生活中，让孩子学习编程是想让他早点对这方面有概念能更好地看到和理解未.....',
    parentName: '皇甫**爸爸',
    className: '暑假班'
  },
  {
    id: 2,
    imgUrl: new URL('@/assets/img/achievement/parentTwo.webp', import.meta.url)
      .href,
    comment:
      '我是朋友推荐的，专做少儿编程培训的，看上去感觉很专业，就约了试听一次课，听完课，孩子都不想走了，一直追着老师问问题：“.....',
    parentName: '傅**父亲',
    className: '暑假班'
  },
  {
    id: 3,
    imgUrl: new URL(
      '@/assets/img/achievement/parentThree.webp',
      import.meta.url
    ).href,
    comment:
      '我觉得人们正越来越深层次地被卷入到以软件驱动的数字化生活中，让孩子学习编程是想让他早点对这方面有概念能更好地看到和理解未.....',
    parentName: '沈**妈妈',
    className: 'Scratch小码'
  },
  {
    id: 4,
    imgUrl: new URL('@/assets/img/achievement/parentFour.webp', import.meta.url)
      .href,
    comment:
      '孩子沉迷于游戏，与其对其各种苛刻打骂，不如正确的引导他，某某少儿编程机构帮我把他从玩游戏变成编游戏。未来是属于人工智能时代，既然现在有.....',
    parentName: '林**妈妈',
    className: 'Scratch飞码'
  }
]
</script>

<template>
  <div class="container">
    <div class="wrapper">
      <div class="title">
        <h2>家长有话说</h2>
        <img src="@/assets/img/titlebg/titlebg2.webp" alt="" />
        <span>通过编程帮助孩子创作个性化作品</span>
      </div>
      <div class="content">
        <div class="item" v-for="item in Data" :key="item.id">
          <div class="parent">
            <img :src="item.imgUrl" alt="" />
            <span>家长：{{ item.parentName }}</span>
            <span>班级：{{ item.className }}</span>
          </div>
          <div class="commtent">
            <span>{{ item.comment }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container {
  padding: 20px 0 100px 0;
  width: 100%;
  .wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .title {
      margin: 20px 0;
      width: 100%;
      position: relative;
      display: flex;
      align-items: center;
      flex-direction: column;
      h2 {
        font-size: 36px;
      }
      img {
        position: absolute;
        top: 10px;
      }
      span {
        margin-top: 10px;
        font-size: 14px;
        color: rgb(178, 178, 178);
        line-height: 48px;
        font-weight: normal;
      }
    }
    .content {
      display: grid;
      width: 100%;
      grid-template-columns: auto auto;
      justify-content: space-between;
      grid-row-gap: 20px;
      .item {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 585px;
        height: 275px;
        .parent {
          display: flex;
          align-items: center;
          flex-direction: column;
          img {
            margin-bottom: 20px;
          }
          span {
            color: rgb(153, 153, 153);
            font-size: 12px;
            line-height: 24px;
          }
        }
        .commtent {
          position: relative;
          width: 350px;
          span {
            position: absolute;
            top: -80px;
            left: 30px;
            font-size: 14px;
            line-height: 30px;
            overflow: hidden; /* 隐藏溢出的内容 */
            display: -webkit-box;
            -webkit-line-clamp: 3; /* 限制在3行内 */
            -webkit-box-orient: vertical;
          }
        }
      }
    }
  }
}
</style>
